<template>
    <div style="display: flex;flex-direction: column;">
        <div class="header">
            <el-button type="primary" @click="add">添加</el-button>
        </div>
        <div class="content">
            <div class="fun">
                <div class="tool-title">图形工具</div>
                <div class="tool-items">
                    <div 
                        class="tool-item" 
                        draggable="true" 
                        @dragstart="dragStart($event, 'rectangle')"
                    >
                        <i class="el-icon-picture-outline"></i>
                        <span>矩形</span>
                    </div>
                    <div 
                        class="tool-item" 
                        draggable="true" 
                        @dragstart="dragStart($event, 'circle')"
                    >
                        <i class="el-icon-refresh"></i>
                        <span>圆形</span>
                    </div>
                    <div 
                        class="tool-item" 
                        draggable="true" 
                        @dragstart="dragStart($event, 'triangle')"
                    >
                        <i class="el-icon-caret-top"></i>
                        <span>三角形</span>
                    </div>
                    <div 
                        class="tool-item" 
                        draggable="true" 
                        @dragstart="dragStart($event, 'star')"
                    >
                        <i class="el-icon-star-on"></i>
                        <span>星形</span>
                    </div>
                </div>
            </div>
            <div class="left">

            </div>
            <div id="center">
                <div id="canvas"></div>
            </div>
            <div class="right">
                <div class="thumbnails-title">缩略图导航</div>
                <div class="thumbnails-container">
                    <div 
                        v-for="(thumbnail, index) in thumbnails" 
                        :key="index"
                        class="thumbnail-item"
                        :class="{ active: currentBoardIndex === index }"
                        @click="jumpToBoard(index)"
                    >
                        <div class="thumbnail-number">{{ index + 1 }}</div>
                        <div class="thumbnail-preview"></div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import { KonvaJs } from './utills/konva';
export default {
    name: 'konva-demo-pages',
    data() {
        return {
            konva: new KonvaJs('canvas', 'center'),
            thumbnails: [{ id: 1 }],
            currentBoardIndex: 0,
            currentShape: null
        }
    },
    mounted() {
        this.konva.init()
        // 监听当前活动画板变化
        this.konva.onBoardChange = (index) => {
            this.currentBoardIndex = index;
        };
        
        // 添加窗口大小调整处理
        window.addEventListener('resize', this.handleResize);
    },
    beforeDestroy() {
        // 组件销毁前移除事件监听，避免内存泄漏
        window.removeEventListener('resize', this.handleResize);
    },
    methods: {
        handleResize() {
            // 调用Konva实例的onresize方法
            this.konva.onresize();
        },
        add() {
            this.konva.drawBoard();
            // 添加一个新的缩略图
            this.thumbnails.push({ id: this.thumbnails.length + 1 });
        },
        jumpToBoard(index) {
            // 调用konva方法跳转到对应画板
            this.konva.jumpToBoard(index);
            this.currentBoardIndex = index;
        },
        // 拖拽开始时的处理
        dragStart(event, shapeType) {
            // 记录当前拖拽的图形类型
            this.currentShape = shapeType;
            // 设置拖拽数据
            event.dataTransfer.setData('shapeType', shapeType);
            // 设置拖拽效果
            event.dataTransfer.effectAllowed = 'copy';
        },
        // 处理拖拽放置
        handleDrop(event) {
            event.preventDefault();
            
            // 获取拖拽的图形类型
            const shapeType = this.currentShape || event.dataTransfer.getData('shapeType');
            if (!shapeType) return;
            
            // 获取画板舞台的位置信息
            const stage = this.konva.stage;
            if (!stage) return;
            
            // 获取舞台容器相对于视图的位置
            const stageContainer = stage.container();
            const containerRect = stageContainer.getBoundingClientRect();
            
            // 计算鼠标在舞台上的坐标
            const stageX = event.clientX - containerRect.left;
            const stageY = event.clientY - containerRect.top;
            
            // 调用Konva绘制图形，传入舞台坐标
            const shape = this.konva.addShape(shapeType, stageX, stageY);
            
            // 如果图形添加失败（如点击位置不在当前活动画板内），提示用户
            if (!shape) {
                this.$message.warning('请确保拖放位置在当前活动的画板内');
            }
            
            // 清除当前图形类型
            this.currentShape = null;
        }
    }
}
</script>

<style lang="scss" scoped>
.header {
    height: 50px;
}

.content {
    display: flex;

    .fun {
        width: 80px;
        background-color: #f5f7fa;
        padding: 10px 0;
        
        .tool-title {
            text-align: center;
            font-weight: bold;
            font-size: 14px;
            margin-bottom: 15px;
        }
        
        .tool-items {
            display: flex;
            flex-direction: column;
            gap: 15px;
            
            .tool-item {
                display: flex;
                flex-direction: column;
                align-items: center;
                cursor: grab;
                padding: 8px 0;
                
                &:hover {
                    background-color: #e8f4ff;
                }
                
                i {
                    font-size: 20px;
                    margin-bottom: 5px;
                    color: #409EFF;
                }
                
                span {
                    font-size: 12px;
                }
            }
        }
    }

    .left {
        width: 200px;
    }

    .right {
        width: 200px;
        padding: 10px;
        
        .thumbnails-title {
            font-size: 16px;
            font-weight: bold;
            margin-bottom: 15px;
            text-align: center;
        }
        
        .thumbnails-container {
            display: flex;
            flex-direction: column;
            gap: 10px;
            
            .thumbnail-item {
                display: flex;
                align-items: center;
                cursor: pointer;
                padding: 8px;
                border: 1px solid #ddd;
                border-radius: 4px;
                transition: all 0.3s;
                
                &:hover {
                    background-color: #f5f5f5;
                }
                
                &.active {
                    border-color: #409EFF;
                    background-color: rgba(64, 158, 255, 0.1);
                }
                
                .thumbnail-number {
                    width: 24px;
                    height: 24px;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    border-radius: 50%;
                    background-color: #409EFF;
                    color: white;
                    font-size: 14px;
                    margin-right: 8px;
                }
                
                .thumbnail-preview {
                    width: 120px;
                    height: 60px;
                    background-color: white;
                    border: 1px solid #ddd;
                }
            }
        }
    }

    #center {
        flex: 1;
        height: 850px;
        border: 2px solid #ddd;
        overflow-y: auto;
        position: relative;
        margin-bottom: 20px;
        background-color: #cdcdcd;
    }
}
</style>